#{extends 'main.html' /}
#{set title:'Home' /}

<link rel="stylesheet" type="text/css" href="/public/stylesheets/index.css"/>
<script type="text/javascript" src="/public/javascripts/index.js"></script>

<!-- svn test -->
<div id="wrapper" style="margin:auto; width:1024px">
	<div id="navigation"></div>
	<div id="content" class="init-hidden">
		<div id="content-frame">
			<div id="content-title" class="div-title" >homepage</div>
			<div id="content-container" class="div-container">
				<table style="padding:0;margin:0">
					<tr>
						<td style="vertical-align:top;width:710px">
							<div style="width:700px">
								<div id="content-tabs">
									<ul>
										<li><a href="#welcome-div">Homepage</a></li>
										<li><a href="#friend-div">Friends</a></li>
										<li><a href="#group-div">Groups</a></li>
										<li><a href="#post-div">Posts</a></li>
										<li><a href="#personal-info-div">Personal Info</a></li>										
									</ul>
									<div id="session-user-id" style="display:none"></div>
									<div id="welcome-div"></div>
									<div id="friend-div">								
										<div id="fr-frof-div">
										</div><hr/>
										<div id="fr-nfrof-div">
										</div><hr/>
										<div id="frof-nfr-div">
										</div>
									</div>
									
									<div id="group-div">								
										<div id="cr-gr-div">
										</div><hr/>
										<div id="fr-nfrof-div">
										</div><hr/>
										<div id="frof-nfr-div">
										</div>
									</div>
									
									<div id="post-div">									
										<div id="post-create-div">
											<label for="post-create-title">Post title: </label><br/>
											<input type="text" name="post-create-title" value="" id="post-create-title"><br/>
											<label for="post-create-content"></label><br/>
											<textarea name="post-create-content" rows="8" cols="60" id="post-create-content"></textarea><br/>
											<input type="button" name="" value="Submit" id="post-create-submit">	
										</div>
										<hr/>
										<div id="post-disp-div">	
										</div>							
									</div>
									
									<div id="personal-info-div"></div>
								</div>
								<div id="logout"><input type="button" id="logout" value="logout"></div>
							</div>
						</td>
						<td style="text-align:center;vertical-align:top;width:310px">

							<div>
								<div id="portrait-div">
									<div id="portrait-disp-div">
										<img id="thumb" width="200px" height="200px" src="/public/images/default-user-image" />
									</div>
									<div id="portrait-upload-div" >
									</div>
									<a href="" id="trya">aaa</a>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</div>			
		</div>
	</div>
	<div id="login" class="init-hidden">
		<div id="login-frame">
			<div id="login-title" class="div-title">login</div>
			<div id="login-container" class="div-container">
				<div id="loginerr" class="err-msg init-hidden">Incorrect email or password.</div>
				<label for="email">Email </label><br/>
				<input type="text" name="email" value="" id="email" size="27" class=""><br/>
				<label for="password">Password </label><br/>
				<input type="password" name="password" value="" id="password" size="27" class="" onkeydown="doEnter(event)">
				<span><input type="submit" value="Login &rarr;" id="submit"></span>
				<span><input type="button" value="Join Us?" id="register" onclick="javascript:window.location.href='register'"></span>
			</div>	
		</div>
		
		
	</div>
</div>


<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$("a#trya").click(function(event) {
			event.preventDefault();
			history.pushState({ path: this.path }, '', "aaaaaaa");
		})
		
		
		init();
		
		$("#submit").click(function(event) {
			event.preventDefault();
			$.post("/Login/connectJSON", {"u":$("#email").val(), "p":$("#password").val()}, function(result) {
				if(result==false) {
					$("#email").val("").focus();
					$("#password").val("");
					$("#loginerr").show("slow");
					choosePart("login");
				} else {
					updateContent(result);
					choosePart("content");
				}
			}, "json");
		});
		
		$("#logout").click(function() {
			$.post("/Login/logoutJSON", {}, init);
		});
		
		$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
		$(":input[type='button'],:input[type='submit']").button();
		
		$("#content-tabs").wijtabs({
			showOption: {
				fade: true,
				duration: 200
			}, 
			hideOption: {
				fade: true, 
				duration: 200
			}
		});
		
		//$(window).bind('popstate', function() {
		//	$('#slider').slideTo(location.pathname)
		//})


		
		$("input#post-create-submit").click(function() {
			$.post("/Login/getCurrentUserJSON", {}, function(result) {
				if (result != false) {
					createPost(result);
				} 
			}, "json");
		});
		
		$("#upload-photo").wijdialog({
			autoOpen: false,
			height: 180,
			width: 400,
			modal: true,
			show: 'fold',
			hide: 'fold', 
			resizable: false, 
			captionButtons: {
                pin: { visible: false },
                refresh: { visible: false },
                toggle: { visible: false },
                minimize: { visible: false },
                maximize: { visible: false }
			}
		});

		var uploader = new qq.FileUploader({
			element: document.getElementById('portrait-upload-div'),
			action: '/Photo/uploadUserPhoto', 
			allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], 
			onComplete: function(id, fileName, responseJSON){
				updatePortrait($("#session-user-id").html());

			}
		});
	});
</script>